<template>
  <div class="bread-crumb">
    <slot>
      <div class="is-flex">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="(item,index) in routes" :key="index">
            <span v-if="item.redirect === 'noRedirect' || index === routes.length - 1" class="no-redirect">{{ item.meta.title }}</span>
            <a v-else @click.prevent="onClickLink(item)">{{ item?.meta?.title || item.name }}</a>
          </el-breadcrumb-item>
        </el-breadcrumb>
        <slot name="date">
          <div
            v-if="showDate"
            class="bread-crumb__date"
          >
            <el-date-picker
              v-model="date"
              style="width: 100%;"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="handleChange"
            />
          </div>
        </slot>
      </div>
    </slot>
    <slot name="custom"></slot>
  </div>
</template>
<script  lang="ts" setup>
import { computed, type PropType } from 'vue';
import { useRoute, useRouter } from 'vue-router';
defineOptions({
  name: 'BreadCrumb'
});
const props = defineProps({
  showDate: {
    type: Boolean,
    default: false
  },
  dateRange: {
    type: Array as PropType<any[] | null>,
    default: () => {
      return [];
    }
  }
});

const emit = defineEmits(['change', 'update:dateRange']);
const date = computed({
  get() {
    return props.dateRange;
  },
  set(val) {
    emit('update:dateRange', val);
  }
});
const handleChange = (val: any) => {
  date.value = val;
  emit('change', val);
};
const route = useRoute();
const routes = computed(() => {
  return route.matched.filter((item) => item.meta && item.meta.title && item.path !== '/kgj');
});
const router = useRouter();
const onClickLink = (item: any) => {
  const { redirect, path } = item;
  if (redirect && redirect!=='noRedirect') {
    if (typeof(redirect) === 'string') router.push({ name: redirect });
    else router.push(redirect);
    return;
  }
  router.push(path);
};
</script>
<style lang="scss" scoped>
.bread-crumb {
  padding: 8px 24px;
  margin-bottom: $baseMarginBottom;
  background: #fff;
  border-radius: 4px;

  .is-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
  }

  .no-redirect {
    cursor: text;
  }

  &__date {
    flex-shrink: 0;
    width: 328px;
  }

  :deep(.el-breadcrumb) {
    flex: 1;

    .el-breadcrumb {
      &__separator {
        font-weight: 400;
        color: #909399;
      }

      &__inner {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        color: #909399;
        letter-spacing: -.01px;

        a,
        &.is-link {
          font-weight: 400;
          color: #909399;

          &:hover {
            color: var(--el-color-primary);
          }
        }
      }

      &__item {
        &:last-child {
          .el-breadcrumb {
            &__inner {
              color: #303133;
            }
          }
        }
      }
    }
  }
}
</style>
